{% extends 'wxchat/wxbase.html' %}{% load static %}

{% block tabpanel %}

        <div class="weui-tab__content" id="tab1">
            <div class="weui-panel weui-panel_access">
                <div class="weui-panel__hd">
                    <div class="weui-flex">
                            <div class="weui-flex__item"><span class="title">宠物出售信息</span></div>
                            <div class="weui-flex__item"></div>
                            <div class="weui-flex__item"><a href="{% url 'dog-index' %}?next={{ request.get_full_path }}"><i class="icon iconfont icon-shouye2 pink r" ></i></a></div>
                     </div>
                </div>
                <div class="weui-panel__bd" id="dogsale"></div>
                <div class="weui-panel__ft" >
                    <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link" id="dogsalemore" style="display: none">
                        <div class="weui-cell__bd">查看更多</div>
                        <span class="weui-cell__ft"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="weui-tab__content" id="tab2">
            <div class="weui-panel weui-panel_access">
                <div class="weui-panel__hd">
                     <div class="weui-flex">
                            <div class="weui-flex__item"><span class="title">宠物求购信息</span></div>
                            <div class="weui-flex__item"></div>
                            <div class="weui-flex__item"><a href="{% url 'dog-index' %}?next={{ request.get_full_path }}"><i class="fa fa-home icon iconfont icon-shouye2 pink r" ></i></a></div>
                     </div>
                </div>
                <div class="weui-panel__bd" id="dogbuy">

                </div>
                <div class="weui-panel__ft">
                    <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link" id="dogbuymore" style="display: none">
                        <div class="weui-cell__bd">查看更多</div>
                        <span class="weui-cell__ft"></span>
                    </a>
                </div>
            </div>
        </div>

{% endblock tabpanel %}
 {% block tabbar %}
        <a href="#tab1" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">'
                <i class="icon iconfont icon-rongquanmaichu1"></i>
            </div>
            <p class="weui-tabbar__label">宠物出售</p>
        </a>
        <a href="#tab2" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <i class="icon iconfont icon-mairu1" ></i>
            </div>
            <p class="weui-tabbar__label">宠物求购</p>
        </a>

{% endblock tabbar %}
{% block add %}
{#    {% url 'dog-trade-nav' %}?next={{ request.get_full_path }}#}
    <a id="pet_trade" class="circle" href="javascript:;">
          <div class="circle_icon"><i class="icon iconfont icon-zengjia16"></i></div>
          <p>发布</p>
    </a>
     <div class="weui-skin_android" id="actionsheet" style="display: none">
        <div class="weui-mask"></div>
        <div class="weui-actionsheet">
            <div class="weui-actionsheet__menu">
                <div class="weui-actionsheet__cell">
                    <a href="{% url 'dog-sale-add' %}?next={{ next }}" >
                        <img  src="{% static 'wxchat/images/chus.png' %}">
                        <p><h4>宠物出售<h4></p>
                    </a>
                </div>
                <div class="weui-actionsheet__cell">
                      <a href="{% url 'dog-buy-add' %}?next={{ next }}" >
                        <img src="{% static 'wxchat/images/qiug.png' %}">
                        <p><h4>宠物求购<h4></p>
                      </a>
                </div>
            </div>
        </div>
    </div>
{% endblock add %}
{% block bottomjs %}
    {{ block.super }}
    <script type="application/javascript">
        nextBuyUrl = '{% url 'dog-buy-list' %}';
        nextSaleUrl = '{% url 'dog-sale-list' %}';
        var loading = weui.loading('加载中...');
        ///缓存滚动条位置
         $('.weui-tab__panel').scroll(function(){
                if($(this).scrollTop() !=0 ){
                    sessionStorage.setItem('offsetTop',$(this).scrollTop());
                }
        });

        $(function(){
            defIndex = sessionStorage.getItem('trade');
            weui.tab('#tab',{
                defaultIndex: defIndex ==null?0:defIndex,
                onChange: function(index){
                    sessionStorage.setItem('trade',index);
                }
            });

         $('#dogbuymore').on('click',function(){
            getBuyList( nextBuyUrl );
         });
         $('#dogsalemore').on('click',function(){
            getSaleList( nextSaleUrl );
         });
         getBuyList(nextBuyUrl);
         getSaleList(nextSaleUrl);

        })

    function getBuyList(url) {
        $.ajax({
          type: 'GET',
          url: url,
          dataType: 'json',
          timeout: 5000,
          context: $('#dogbuy'),
          success: function(data){
              nextBuyUrl = data.next;
              appendBuyItem(data.results);
              if(nextBuyUrl == null)
                $('#dogbuymore').css('display','none');
              else
                 $('#dogbuymore').css('display','');
              loading.hide();
              setScollPos();
          },
          error: function(xhr, type,error){
              loading.hide();
          }
        });
    }

    function getSaleList(url){
        $.ajax({
          type: 'GET',
          url: url,
          dataType: 'json',
          timeout: 5000,
          context: $('#dogsale'),
          success: function(data){
              nextSaleUrl = data.next;
              appendSaleItem(data.results);
              if(nextSaleUrl == null)
                $('#dogsalemore').css('display','none');
              else
                 $('#dogsalemore').css('display','');
              setScollPos();
          },
          error: function(xhr, type,error){
          }
        });

    }

    function appendBuyItem(results){
        $.each(results,function(index,item){
            var sexImage = getSexImage(item);
            var pet_img = getIcon(item.pet_class);
            buyitem ='<div class="weui-media-box weui-media-box_text">' +
                        '<a href="/wechat/dogbuydetail/' + item.id + '">' +
                        '<h4 class="weui-media-box__title">'+ sexImage  + item.typeid + pet_img +'</h4>' +
                        '<p class="weui-media-box__desc">价格: '+ item.price +'</p>'  +
                        '</a>' +
                     '</div>' ;
            $('#dogbuy').append( buyitem );
        }) ;
    }

    function appendSaleItem(results){
        $.each(results,function(index,item){
            var img_url = item.thumb_url;

            if(img_url == null){
                img_url = '<i class="icon iconfont icon-pet6  weui-media-box__thumb" ></i>';
            }
            else {
                img_url = '<img class="weui-media-box__thumb" src="' + img_url + '">'
            }

            var age = item.ages;
            if( age != null )
                age = '【' + age + '】'

            var setImage = getSexImage(item);
            var pet_img = getIcon(item.pet_class);
            saleitem =  '<a  href="/wechat/dogsaledetail/' + item.id + '" class="weui-media-box weui-media-box_appmsg">' +
                            '<div class="weui-media-box__hd">' + img_url + '</div>'+
                            '<div class="weui-media-box__bd">' +
                               '<h4 class="weui-media-box__title">'+ setImage + item.typeid + age + pet_img +'</h4>' +
                               '<ul class="weui-media-box__info">' +
								  '<li class="weui-media-box__info__meta">价格 : ' + item.price +'</li>' +
								'</ul>' +
                               '<p class="weui-media-box__desc">说明 : '+ item.desc +'</p>'  +
                             '</div>' +
                        '</a>';
            $('#dogsale').append( saleitem );
        }) ;
    }

    ////设置滚动条位置
    function setScollPos(){
        var _offset = sessionStorage.getItem("offsetTop");//获取滚动位置
        $('.weui-tab__panel').scrollTop(_offset);
    }

      // android
    $(function(){
        var $actionSheet = $('#actionsheet');
        var $mask = $actionSheet.find('.weui-mask');

        $("#pet_trade").on('click', function(){
            $actionSheet.fadeIn(200);
            $mask.on('click',function () {
                $actionSheet.fadeOut(200);
            });
        });
    });

    function getIcon(pet_class){
        var pet_img = '';
        if(pet_class == 0){
             pet_img = '<span class="r"><b><i class="icon iconfont icon-pet7 color-warning" ></i></b></span>';
        }
        else{
            pet_img = '<span class="r"><b><i class="icon iconfont icon-maomi color-warning" ></i></b></span>';
        }
        return pet_img;
    }

    </script>
{% endblock bottomjs %}
